import React, { useState, useEffect,useRef,useLayoutEffect } from "react";
import Child from './Child'
const UseTest = () => {
 const [count, setCount] = useState<number>(0);
  const [currPage, setCurrPage] = useState<number>(1);
  const boxRef = useRef(null);
  let timerId = useRef(0)
  // 学用的变量定义
  let timerNotId = 0;
  const childRef = useRef(null)

//   const { data, loading, error} = useRequest('http://google.com/testapi')


  useEffect(()=>{
    //  console.log('组件每次渲染时都要调用(页面每次刷新)');
  })
 useEffect(()=>{
    console.log('useEffect,依赖项是空数组时，componentDidMount 组件挂载 生命周期')
//    const intervalId = setInterval(()=>{console.log('setInterval');},1000)
    
    return ()=>{
        // console.log('componentWillUnmount 组件将要摧毁');
        // clearInterval(intervalId)
    }
 },[])

//   useEffect(()=>{
//     console.log('useEffect,依赖项是空数组时，componentDidMount 组件挂载 生命周期')

//  },
  useEffect(()=>{
    // console.log('useEffect,依赖项是count时，变化')

 },[count])

   useEffect(()=>{
    // console.log('useEffect,依赖项是count1时，变化')
    // fech('/getList',{currPage:currPage}).then(res=>{//更新表格数据 })

 },[currPage])

  return (
    <div>
  <button onClick={()=>setCount(count+1)} >点击{count}</button>
 <p ref={boxRef}><button onClick={()=>{
    boxRef.current.style.border='1px solid red'
    // boxRef.current.parent.remove(boxRef.current)
    console.log('boxRef', boxRef.current);
 }} >ref</button></p>
 <p><button onClick={()=>{
    timerNotId++
    timerId.current = timerId.current +1
    console.log('timerNotId',timerNotId);
        console.log('timerId',timerId.current);
 }}>useRef 保存数据</button></p>

 <p>
    <Child ref={childRef} testValue={12333}/>
 </p>
 <p><button onClick={()=>{
    // console.log('childRef',childRef.current);
    childRef.current.childHandle()
 }}>调用子组件方法</button></p>
     </div>
  )
}

export default UseTest
